<template>
  <el-dialog :visible.sync="payVisible" :title="title" @open="openDialog" @close="closeDialog">
    <el-form ref="payForm" :model="payForm" :rules="payRules" label-width="100px">
      <div v-for="(item, index) in payForm.courses" :key="index">
        <el-row>
          <el-col :span="10">
            <el-form-item :prop="'courses.' + index + '.courseId'" :rules="{required: true, message: '请选择课程', trigger: 'change'}" label="意向课程">
              <el-select v-model="item.courseId" placeholder="选择意向课程" clearable filterable>
                <el-option v-for="course in courses" :key="course.id" :label="course.name" :value="course.id"/>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="2" style="text-align: right">
            <el-button v-if="payForm.courses.length > 1" size="small" icon="el-icon-minus" circle @click="removeCourse(index)"/>
            <el-button v-if="index === payForm.courses.length - 1" icon="el-icon-plus" size="small" circle @click="addCourse"/>
          </el-col>
        </el-row>
      </div>
      <el-row>
        <el-form-item label="充值金额" prop="amount">
          <el-input-number v-model="payForm.amount" :min="1" :controls="false"/>
        </el-form-item>
      </el-row>
      <el-row>
        <el-col :span="10">
          <el-form-item label="支付方式" prop="chargeType">
            <el-select v-model="payForm.chargeType">
              <el-option v-for="type in chargeTypes" :key="type.value" :value="type.value" :label="type.label"/>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="10">
          <el-form-item v-if="payForm.chargeType !== 1" :label="payOrderNoLabel">
            <el-input v-model="payForm.orderNo" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="10">
          <el-form-item label="优惠方式">
            <el-select v-model="payForm.promotionMethod">
              <el-option v-for="type in promotionMethods" :key="type.value" :value="type.value" :label="type.label"/>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="10">
          <el-form-item v-if="payForm.promotionMethod !== 0" label="折扣率">
            <el-input-number
              v-model="payForm.discount"
              :min="0"
              :max="1.0"
              :step="0.1"
              :precision="2"
              controls-position="right" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24">
          <el-form-item label="备注">
            <el-input
              :autosize="{ minRows: 4 }"
              v-model="payForm.remark"
              type="textarea"
              placeholder="当前订单参与优惠方案等..."/>
          </el-form-item>
        </el-col>
      </el-row>
      <el-divider />
      <div style="text-align:center">
        <el-button v-loading="payLoading" type="primary" @click="paySubmit">确认充值</el-button>
      </div>
    </el-form>
  </el-dialog>
</template>

<script>
import { listAllCourse } from '@/api/course'
import { addRecharge } from '@/api/student'
export default {
  name: 'RechargeDialog',
  props: {
    title: {
      type: String,
      default: '学员充值'
    },
    studentId: {
      required: true,
      type: Number
    }
  },
  data() {
    return {
      chargeTypes: this.$store.getters.chargeTypes,
      promotionMethods: this.$store.getters.promotionMethods,
      payLoading: false,
      payVisible: this.visible,
      courses: [],
      payForm: {
        merchantStudentId: 0,
        courses: [{ courseId: '' }],
        amount: 0,
        chargeType: 1,
        orderNo: '',
        promotionMethod: 0,
        discount: '1.0',
        remark: ''
      },
      payRules: {
        amount: [{ required: true, message: '请输入缴费金额', trigger: 'blur' }],
        chargeType: [{ required: true, message: '请选择支付方式', trigger: 'change' }]
      }
    }
  },
  computed: {
    payOrderNoLabel() {
      if (this.payForm.chargeType === 4) {
        return '银行流水号'
      } else {
        return '支付单号'
      }
    }
  },
  watch: {
    visible() {
      this.payVisible = this.visible
    },
    studentId() {
      this.payForm.merchantStudentId = this.studentId
    }
  },
  mounted() {
    listAllCourse({ status: 1 }).then(res => {
      this.courses = res.data
    })
  },
  methods: {
    openDialog() {
      console.log('open recharge')
    },
    closeDialog() {
      this.$emit('close', false)
    },
    removeCourse(index) {
      this.payForm.courses.splice(index, 1)
    },
    addCourse() {
      this.payForm.courses.push({ courseId: '' })
    },
    paySubmit() {
      this.$refs.payForm.validate(valid => {
        if (valid) {
          if (this.payForm.chargeType !== 1 && !this.payForm.orderNo) {
            this.$message.warning('支付凭证必须填写')
            return
          }
          addRecharge(this.payForm).then(res => {
            this.$message.success('充值成功')
            this.$emit('close', true)
          })
        }
      })
    }
  }
}
</script>

<style scoped>

</style>
